Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#toggle:checked ~ .nucl {
  * {
    //animation-duration: 5s;
    --ad: 5s;
  }
}

:root {
  --bg: #FBF7F4;
  --clr: #AEE1CD;
  --ad: 2s;
}
div {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
.nucl {
  position: relative;
  width: 5vmin;
  height: 5vmin;
  //border: 1px solid;
  background:
    radial-gradient(
      circle,
      #3cf 50%,
      #0000 0
    ) 50% 50% / 60% 60% space,
    radial-gradient(
      circle,
      #3fc 50%,
      #0000 0
    ) 50% 15% / 60% 40% space,
    radial-gradient(
      circle,
      #f9c 50%,
      #0000 0
    ) 50% 50% / 50% 90% space,
    
    radial-gradient(
      circle,
      #3cf 50%,
      #0000 0
    ) 0 0 / 45% 45% space;
  animation: turn 60s linear infinite forwards;
  .ele {
    width: 50vmin;
    height: 10vmin;
    border-radius: 100%;
    border: 1px dashed color-mix(in lab, var(--clr), #0005 50%);
    position: absolute;
    translate: -22.5vmin -2.5vmin;
    //180 since the path covers both sides of the hemisphere.
    rotate: calc(var(--r) * 180deg / var(--t));
    z-index: 1;
    
    .dot {
     
      background-color: var(--clr);
      width: 2.5vmin;
      aspect-ratio: 1;
      position: absolute;
      border-radius: 100%;
      offset-path: border-box;
      offset-distance: 0%;
      animation: rot linear var(--ad) infinite forwards calc((var(--r) * -2s )/ var(--t));
      z-index: 5;
      animation-duration: var(--ad);
    }
    
  }
}

@keyframes turn {
  to {
    rotate: 360deg;
  }
}
@keyframes rot {
  to {
    offset-distance: 100%;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  color: #1f2020;
  font-family: system-ui, sans-serif;
  font-size: 1.1rem;
  background-color: #F9F6EF;
  background-image: 
    radial-gradient(
      circle,
      #F9F6EF,
      #EBEBE3
    ),radial-gradient(
      at 100% 20%,
      #5EB0E525, 
      #0000 70%
    ), 
    radial-gradient(
      at 20% 20%,
      #F3D06025, 
      #0000 70%
    ),
    radial-gradient(
      at 20% 100%,
      #A5282C25, 
      #0000 70%
    ),
    radial-gradient(
      at 100% 100%,
      #AEE1CD25, 
      #0000 70%
    );
  background-blend-mode: darken;
}

#toggle {
  display: none;
}
label[for='toggle'] {
  position: absolute;
  top: 1rem;
  left: 50%;
  translate: -50%;
  border: 1px solid;
  padding: .7rem 1.2rem;
  border-radius: .35rem;
  transition: .1s ease;
  box-shadow: .1em .1em .2em
    color-mix(in lab, currentcolor 30%, #0000);
}
#toggle:checked ~ [for='toggle'] {
  box-shadow: -.1em -.1em .2em color-mix(in lab, currentcolor 50%, #0000);
}

Frontend Forever App